<!DOCTYPE html>
<html>
<head>
  <title>舞台灯光模拟器</title>
  <style>
    body { margin: 0; }
    #controls, #stage-controls {
      position: fixed;
      background: rgba(0,0,0,0.7);
      padding: 10px;
      border-radius: 5px;
      color: white;
      z-index: 100;
    }
    #controls {
      top: 20px;
      left: 20px;
    }
    #stage-controls {
      bottom: 20px; 
      left: 20px;
    }
    button {
      margin: 5px;
      padding: 8px;
      background: #2196F3;
      border: none;
      color: white;
      border-radius: 3px;
      cursor: pointer;
    }
    button:hover { background: #1976D2; }
    #gui-container {
      position: fixed;
      top: 20px;
      right: 20px;
      z-index: 100;
    }
    
  </style>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.7/dat.gui.min.js"></script>
</head>
<body>
  <div id="controls">
    <button onclick="lightManager.addLight('flat')">面光灯</button>
    <button onclick="lightManager.addLight('rgb')">RGB灯</button>
    <button onclick="lightManager.addLight('beam')">光束灯</button>
    <button onclick="saveScene()">保存场景</button>
    <button onclick="loadScene()">加载场景</button>
    <button onclick="takePhoto()">拍照</button>
    <p style="font-size: medium;">提示：按住Ctrl键多选灯具或平移视角，按下shift键切换框选模式</p>
    <p style="font-size: small">数字键1，全选rgb灯；数字键2，全选面光灯；数字键3，全选光束灯</p>
    <p style="font-size: small">选中灯具后，按下tab键可以回到默认状态</p>
    <p style="font-size: medium;">模拟器仅作为灯光设计参考，不作为演出使用，请以实际情况为准</p>
  </div>
  <div id="stage-controls"></div>
  <div id="gui-container"></div>
  <script src="main.js"></script>
</body>
</html>